<template>
	<view>
		<template>
			<nodata v-if="isNodata"></nodata>
			<view class="replenisher-list" v-else>
				<view class="replenisher-list-item" v-for="item in list" @click="openDialog(item.id)">
					<view class="cell01">
						<image  :src="item.user.avatar"></image>
						
					</view>
					<view class="cell02">
						<view class="cell02-title">
							<text>{{item.user.username}}</text>
							<text>{{item.user.mobile}}</text>
						</view>
						<view class="cell02-name">店铺：{{item.shop.merchantName}}</view>
					</view>
					<view class="cell03">
						<image src="../../static/index/icon_zk.png"></image>
					</view>
				</view>
			</view>
		</template>
		<my-btn btnText="添加店长" @btnClick="$util.$navigateTo('./addAdmin')"></my-btn>
		<uni-popup ref="popup1" type="bottom">
			<view class="popup-content">
				<view class="popup-btn " @click="doDelete" >删除</view>
				<view class="popup-btn" @click="doCancel">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import myBtn from '@/components/csycomponents/my-btn.vue'
	export default {
		components: {
			uniPopup,
			myBtn
		},
		data() {
			return {

				pageSize: 10,
				pageIndex: 0,
				list: [],
				currentId:-1,
				arrLength:0,
				isNodata:false
			}
		},
		onShow() {
			var _this=this;
			_this.pageIndex=0;
			this.getList(function(arr){
				_this.list=arr;
			})
		},
		onReachBottom(){
			var _this=this;
			console.log("onReachBottom");
			//获取数据
			if(this.arrLength>this.pageSize||this.arrLength==this.pageSize){
				this.getList(function(arr){
					_this.list=_this.list.concat(arr);
				})
			}
		},
		methods: {

			doDelete() {
				this.$refs.popup1.close()
				
				let param = {
					id: this.currentId,
				}
				let that = this;
				this.$api.deleteAdmin(param).then(res => {
					console.info(" operatorDel ===" + JSON.stringify(res));
					if (res.code == 1) {
						that.$util.$showToast("删除成功");
						that.pageIndex=0;
						that.getList(function(arr){
							that.list=arr;
						})
						if(that.list.length<1){
							that.isNodata=true;
						}else{
							that.isNodata=false;
						}
					}else{
						that.$util.$showToast(res.data.msg);
						
					}
				})
			},
			doCancel() {
				this.$refs.popup1.close()
			},
			addDevice(){
				this.$refs.popup1.close()
				uni.navigateTo({
					url: './deviceChoose?id='+this.currentId
				})
			},
			myDeviceList() {
				this.$refs.popup1.close()
				uni.navigateTo({
					url: './replenishDevicesList?id='+this.currentId
				})
			},
			openDialog(id) {
				this.currentId = id;
				this.$refs.popup1.open()
			},
			getList(cb){
				this.pageIndex=this.pageIndex+1;
				let param = {
				}
				let that = this;
				this.$api.adminList(param).then(res => {
					console.info(" adminList ===" + JSON.stringify(res));
					if (res.code == 1) {
						// that.list = res.data.list;
						let arr = res.data;
						that.arrLength=arr.length;
						if(cb){
							cb(arr);
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.replenisher-list {
		margin-bottom: 114rpx;

		.replenisher-list-item {
			display: flex;
			margin: 20rpx;
			height: 136rpx;
			border-bottom: 0.5rpx solid  #E1E1E1;
			cursor: pointer;
			.cell01 {
				width: 100rpx;
				margin-top: 18rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.cell02 {
				flex: auto;
				margin-top: 18rpx;

				.cell02-title {
					margin-bottom: 20rpx;
					color:  #666666;
					font-size: 30rpx;
					text{
						margin-right: 20rpx;
					}
				}

				.cell02-name {
					color:  #666666;
					font-size: 26rpx;
				}
			}

			.cell03 {
				margin-top: 48rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.popup-content {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 0.5rpx solid #f5f5f5;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>
